<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>SubtractJS Tutorial</title>
    <script src="../Scripts/jquery-1.10.2.js" type="text/javascript"></script>
    <script src="../Scripts/Subtract.js" type="text/javascript"></script>
    <style type="text/css">
        html, body {
            background: #527578;
            overflow: hidden;
            color: black;
        }


        div {
            margin: 5px;
            border: 1px solid black;
            padding: 5px;
            overflow: auto;
            display: none;
            background: #b0c7c9;
        }

            div.yellowHover:hover {
                background: #FFFFDD;
            }


        #page {
            margin: 5px;
            padding: 5px;
            background: #527578;
            overflow: hidden;
            display: block;
            border: 0px none;
        }

        #header {
        }

        #menubar {
            height: 20px;
        }

        #navbar {
            width: 150px;
        }

        #footer {
        }

        .zebra {
            background: black;
            /*background: url("http://www.grax.com/images/zebra-bg.png");
            background-repeat: repeat;*/
        }

            .zebra:hover {
                /*background: url("http://www.grax.com/images/zebra-bg.png");*/
            }

        h2 {
            text-align: center;
            font-size: 18px;
        }

        .whiteBg {
            background: white;
        }

        #mainbody {
            font-size: 24px;
            padding: 25px;
            background: #EEEEEE;
        }


    </style>
    <script type="text/javascript">
        function showNext() {
            var left, top;
            var item = $("div:hidden:not(.pageText)").first();

            if (item.get(0) != undefined) {
                item.show();
                SubtractJS.UpdateLayout();

                if (item.hasClass("sj-fill-top") || item.hasClass("sj-fill-bottom")) {
                    left = item.position().left;
                    item
						.css("left", (left - item.width()) + "px")
						.animate({ "left": left + "px" }, "fast");
                }

                if (item.hasClass("sj-fill-left") || item.hasClass("sj-fill-right")) {
                    top = item.position().top;
                    item
						.css("top", (top + item.height()) + "px")
						.animate({ "top": top + "px" }, "fast");
                }

                var itemText = item.find(".pageText");
                if (itemText.get(0) != undefined) {
                    $("#mainbody").html(itemText.html());
                }
            } else if ($("#navbar").data("sj-sort-order") === 10) {

            } else {
                $("#navbar").data("sj-sort-order", 10);
                SubtractJS.UpdateLayout();
                $("#mainbody").html("Voila!  Now our layout matches our requirements.");

                $("div").addClass("yellowHover");
            }
        }

        $(function () { $("body").click(showNext) });
    </script>
</head>
<body>
    <div id="mainbody" class="whiteBg sj-fill">
        <div class="pageText">Here we have filled the entire page.</div>
    </div>

    <div id="header" class="sj-fill-top">
        <h2>Creating a Page with SubtractJS</h2>
        <div class="pageText">Now, we add a header to the top of the page.  The size of the header is subtracted from the available size for this content area automatically.</div>
    </div>
    <div id="menubar" class="sj-fill-top">
        [Item 1] [Item 2] [Item 3] [Item 4] [Item 5] [Item 6]
        <div class="pageText">Again, we add to the top of the page.  The menu bar area is subtracted from the content area that is left after we subtract the header.</div>
    </div>
    <div id="navbar" class="sj-fill-left">
        <ul>
            <li>Home</li>
            <li>
                Create Layout
                <ul>
                    <li>Header</li>
                    <li>Menu Bar</li>
                    <li>Navigation Bar and stuff</li>
                    <li>Main Contents</li>
                    <li>Footer</li>
                </ul>
            </li>
        </ul>
        <div class="pageText">This time we add an element to the left side of the page.  This is again subtracted from the remaining content area.</div>
    </div>
    <div id="footer" class="sj-fill-bottom">
        &copy; Copyright 2014 Grax Multimedia
        <div class="pageText">
            And now the footer is subtracted from the content area.  As you can see below, since we subtracted the footer after we subtracted the
            left navigation area,  the footer does not fill the entire bottom of the screen.<br/>
            <br/>
            If this is what you want, great.  Otherwise, you need to either change the order of the elements in the html source so that the footer is 
            defined before the left navigation area, or you need to set a "data-sj-sort-order" attribute on the left navigation area so that it renders after 
            the footer element.
        </div>
    </div>
</body>
</html>